<template>
    <div class="app-container">
        <el-form :model="listQuery" ref="queryForm" size="small" :inline="true">
            <el-form-item label="用户名" prop="user_name">
                <el-input v-model="listQuery.user_name" placeholder="请输入用户名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item label="登录名" prop="login_name">
                <el-input v-model="listQuery.login_name" placeholder="请输入登录名" clearable
                    @keyup.enter.native="handleQuery" />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            </el-form-item>
        </el-form>
        <table-list :tableData="list" :tableLabel="columns" :loading="loading"></table-list>

        <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit"
            @pagination="handleQuery" />
    </div>
</template>

<script>
import { getUserList } from '@/api/system/user'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import TableList from '@/components/TableList'

export default {
    name: 'UserList',
    components: { Pagination,TableList},
    data() {
        return {
            list: null,
            total: 0,
            loading: true,
            listQuery: {
                page: 1,
                limit: 20,
                user_naem: '',
                login_name:''
            },
            columns: [
                { id: 1, prop: 'id', label: 'ID' },
                {id:2, prop: 'user_name', label:'用户名'},
                {id:3, prop: 'login_name', label:'登录名'},
            ]
        }
    },
    created() {
        this.handleQuery()
    },
    methods: {
        handleQuery() {
            this.loading = true
            getUserList(this.listQuery).then(response => {
                this.list = response.data.data
                this.total = response.data.total
                this.loading = false
            })
        }
    }
}
</script>

<style scoped>
.edit-input {
    padding-right: 100px;
}

.cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
}
</style>